<template>
  <div id="socialMedia">
	  <!-- page banner -->
	  <div class="page-banner about-banner text-center">
	      <p>为<span class="text-gold">特立独行</span>的游客寻找</p>
	      <h3 class="banner-title">与众不同的酒店</h3>
	  </div>
	  <!-- crumb nav -->
	  <div class="crumb-nav">
	    <div class="fixed-wrapper">
	    	<router-link to="/home">首页</router-link><i class="line">&gt;</i>
	    	<router-link to="/about">品牌故事</router-link><i class="line">&gt;</i>
	    	<span class="cur">媒体入住申请</span>
	    </div>
	  </div>
	  <aboutNav v-bind:page-socialmedia="true"></aboutNav>
  <!-- social-media start -->
  <div class="fixed-wrapper page-content social-media">
    <div class="page-title text-center"><div class="page-title-inner"><span>媒体入住申请</span></div></div>
    <div class="text-center form-instruction">
      <p>SLH在全球关键地点设有专业沟通团队，因此，有能力满足您的媒体需求。</p>
      <p>SLH拥有私人在线数字图片库，您可以从<a href="https://clientservices.vfmii.com/pdl/Main.html?company=slh" target="_blank">图库</a>免费下载的高分辨率照片，确保您能快速找到您所需要的东西，<br/>还可以在线浏览最新的SLH新闻稿。</p>
    </div>
    <div class="item address-info after-clear">
      <ul class="float-left">
        <li><h3 class="from-title">中国地区：</h3></li>
        <li>Janet Bao 包剑 – 中国区域经理</li>
        <li><a href="mailto:Janet.baao@slh.com">Janet.baao@slh.com</a></li>
        <li>Tel: <a href="tel:+86 21 60323585">+86 21 60323585</a></li>
        <li>上海市淮海中路中环广场25楼2515单元 200020</li>
      </ul>
      <ul class="float-right">
        <li><h3 class="from-title">亚太地区:</h3></li>
        <li>Juliana Tan – PR Manager APAC</li>
        <li><a href="mailto:juliana.tan@slh.com">juliana.tan@slh.com</a></li>
        <li>Tel: <a href="tel:+65 6632 7288">+65 6632 7288</a></li>
        <li>The Concourse, 300 Beach Road, Suite13-06, Singapore 199555</li>
      </ul>
    </div>
    <div class="mediaInForm">
      <div class="formBox">
        <div class="text-center form-instruction">
          <p>如果您因工作入住我们slh的其中一家酒店，请填写媒体入住申请表格。</p>
          <p>系统将自动把您的申请分享给相关的酒店。酒店会直接给您回复，并告知他们是否能够接待以及如何接待您。</p>
        </div>
        <div id="vueCheck">
          <div class="item">
            <calendar :value="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" ></calendar>
          </div>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" placeholder="申请报道的酒店名称" />
          </div>
          <div class="item">
            <span class="input-tip">*</span>
            <select>
              <option value="">称谓</option>
              <option value="Dr">先生</option>
              <option value="Miss">夫人</option>
              <option value="Mr">女士</option>
              <option value="Mrs">小姐</option>
              <option value="Ms">博士</option>
              <option value="Prof">教授</option>                
            </select>
          </div>
          <p class="ie9Lable">名:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" value="" placeholder="名" />
          </div>
          <p class="ie9Lable">姓:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" value="" placeholder="姓" />
          </div>
          <p class="ie9Lable">国家:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" value="" placeholder="国家" />
          </div>
          <p class="ie9Lable">邮箱地址:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" value="" placeholder="邮箱地址" />
          </div>
          <p class="ie9Lable">邮箱地址:</p>
          <div class="item">
            <input class="txtCss" value="" placeholder="电话" />
          </div>
          <div class="item">
            <span class="input-tip">*</span>
            <select>
              <option value="">职位</option>
                <option value="Editor">编辑</option>
                <option value="Managing Director">总编</option>
                <option value="News Editor">新闻编辑</option>
                <option value="Business Editor">商业版编辑</option>
                <option value="Travel Editor">旅游编辑</option>
                <option value="Travel Writer">旅游作家</option>
                <option value="Food Writer">美食作家</option>
                <option value="Spa Writer">水疗作家</option>
                <option value="Freelancer">自由撰稿人</option>
                <option value="Blogger">博主</option>
                <option value="Photographer">摄影师</option>
                <option value="Producer">制作人</option>
                <option value="Other">其它</option>               
            </select>
          </div>
          <div class="box">
            <p class="ie9Lable">其他职位:</p>
            <div class="item">
              <span class="input-tip">*</span>
              <input class="txtCss" value="" placeholder="其他职位" />
            </div>
          </div>
          <p class="ie9Lable">出版物名称:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <input class="txtCss" value="" placeholder="出版物名称" />
          </div>
          <p class="ie9Lable">出版物网址:</p>
          <div class="item">
            <input class="txtCss" value="" placeholder="出版物网址" />
          </div>
          <p class="ie9Lable">出版物简介:</p>
          <div class="item">
            <textarea class="textCss" cols=40 rows=4  placeholder="出版物简介"></textarea>
          </div>
        </div>
        <div class="box">
          <h3 class="from-title"><span class="input-tip">*</span>媒体（可全选）</h3>
          <ul class="item after-clear">
            <li class="item-w25">
              <div class="checkbox" data-value="Print - newspaper"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />纸质报纸</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Print - magazine"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />纸质杂志</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Broadcast"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />广播</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Radio"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />无线电</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Online"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />网络</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Blog"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />博客</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Social Media"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />社会化媒体</div>
            </li>
            <li class="item-w25">
              <div class="checkbox" data-value="Other"><span></span><input name="favouriteLeisureActivities" type="hidden" value="" />其他</div>
            </li>
            <li class="clear"></li>
          </ul><!--list end-->
        </div>
        <div class="box">
          <h3 class="from-title">如果是社交媒体，请下面具体说明</h3>
          <p class="ie9Lable">instagram帐号:</p>
          <div class="item">
            <input class="txtCss" id="instagram" value="" placeholder="instagram帐号" />
          </div>
          <p class="ie9Lable">Twitter帐号:</p>
          <div class="item">
            <input class="txtCss" id="twitter" value="" placeholder="Twitter帐号" />
          </div>
          <p class="ie9Lable">Facebook帐号:</p>
          <div class="item">
            <input class="txtCss" id="facebook" value="" placeholder="Facebook帐号" />
          </div>
          <div class="box">
            <h3 class="from-title"><span class="input-tip">*</span>发布频次</h3>
            <ul class="item after-clear">
              <li style="display:none;"><input name="publicationFrequency" type="hidden" value="" id="publicationFrequency"/></li>
              <li class="item-w25 radiobox" data-value="Daily"><span></span>每日</li>
              <li class="item-w25 radiobox" data-value="Weekly"><span></span>周</li>
              <li class="item-w25 radiobox" data-value="Monthly"><span></span>月</li>
              <li class="item-w25 radiobox" data-value="Other"><span></span>其他</li>
              <li class="clear"></li>
            </ul><!--list end-->
          </div>
          <div id="vueCheck2">
            <p class="ie9Lable">发行量/每月在线独立用户量/广播数据:</p>
            <div class="item">
              <span class="input-tip">*</span>
              <input class="txtCss" value="" placeholder="发行量/每月在线独立用户量/广播数据" />
            </div>
            <p class="ie9Lable">读者/视听群体:</p>
            <div class="item">
              <span class="red cc">*</span>
              <textarea class="textCss" cols=40 rows=4 placeholder="读者/视听群体"></textarea>
            </div>
            <p class="ie9Lable">对选择的酒店进行报道的字数/页数:</p>
            <div class="item">
              <span class="input-tip">*</span>
              <input class="txtCss" id="coverage"  placeholder="对选择的酒店进行报道的字数/页数" />
            </div>
          </div>
          <p class="ie9Lable">预计报道日期:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <span class="date-tip"></span>
            <input class="txtCss time" value="" placeholder="预计报道日期" id="J_bdsj" />
            <div class="timeBox"></div>
          </div>
          <p class="ie9Lable">内容角度:</p>
          <div class="item" id="vueCheck3">
            <span class="red cc">*</span>
            <textarea class="textCss" cols=40 rows=4 placeholder="内容角度"></textarea>
          </div>
          <p class="ie9Lable">抵达日期:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <span class="date-tip"></span>
            <input class="txtCss time" value="" placeholder="抵达日期"  id="J_dida" />
            <div class="timeBox" id="time_dida"></div>
          </div>
          <p class="ie9Lable">抵达时间:</p>
          <div class="item" id="vueCheck6">
              <span class="input-tip">*</span>
              <input class="txtCss" id="arrivalTime" value="" placeholder="抵达时间"/>
              <p class="tip">格式如:09:30</p>
          </div>
          <p class="ie9Lable">离店日期:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <span class="date-tip"></span>
            <input class="txtCss time" value="" placeholder="离店日期"/>
            <div class="timeBox" id="time_lidian"></div>
          </div>       
          <div class="item">
            <select>
              <option value="">入住人数</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
          </div>
          <div class="item">
            <select>
              <option value="">期望膳食</option>
              <option value="B & B">含早餐</option>
              <option value="Half-board">两餐</option>
              <option value="All inclusive">三餐</option>
            </select>
          </div>
          <p class="ie9Lable">特殊要求:</p>
          <div class="item">
            <textarea class="textCss" cols=40 rows=4 placeholder="特殊要求"></textarea>
          </div>
          <div class="item" id="vueCheck4">
            <span class="input-tip">*</span>
            <select>
              <option value="">入住方式</option>
              <option value="Complimentary">免费</option>
              <option value="Press rate">媒体价格</option>
            </select>
          </div>
          <p class="ie9Lable">最迟答复日期:</p>
          <div class="item">
            <span class="input-tip">*</span>
            <span class="date-tip"></span>
            <input class="txtCss time" value="" placeholder="最迟答复日期" id="J_dafu" />
            <div class="timeBox" id="time_dafu"></div>
          </div>
          <div class="item text-center">
            <button type="submit" id="submit" class="btn btn-green">提交</button>
          </div>
        </div>
      </div><!--formBox end-->
    </div><!--mediaInForm end-->
  </div>
  <!-- social-media end -->
  </div>
</template>

<script>
import aboutNav from './../common/aboutNav.vue'
import Calendar from './../../libs/Vue2-calendar/Calendar.vue'

export default {
  name: 'socialMedia',
  components: {
    aboutNav,
    Calendar
  },
  data () {
    return {
      disabled: [],
      value: '2015-06-10',
      format: 'yyyy-MM-dd',
      clear: true,
      placeholder: '预计报道日期'
    }
  }
}
</script>
